<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景混合</title>
  <link rel="stylesheet" type="text/css" href="index.css">
  </link>
</head>

<body>

  <div class="container">
    <div class="shirt">
      <img src="images/t_shirt.png" alt="">
      <div class="overlay">
        <div class="pattern"></div>
        <img src="images/t_shirt_overlay.png" alt="">
      </div>
    </div>
    <div class="options">
      <div class="option "></div>
      <div class="option active">
        <img src="images/1.png" alt="">
      </div>
      <div class="option ">
        <img src="images/2.png" alt="">
      </div>
      <div class="option ">
        <img src="images/3.png" alt="">
      </div>
    </div>
  </div>

</body>
<!-- <script src="index.js"></script> -->
<script>
  'use strict'

  const options = document.querySelectorAll('.option');
  const shirtOverlay = document.querySelectorAll('.shirt-overlay');
  const shirtOverlayPattren = document.querySelectorAll('.shirt-overlay-pattern');
  console.log(options);

  function click(event) {
    console.log(event);
    
    // for (const option of options) {
    //   option.removeClass('active');
    // }
    // options.forEach(element => {
    //   option.removeClass('active');

    // });

    // event.addClass('active');
    // let pattern = this.find('img').attr('src');
    // if (!pattern) {
    //   shirtOverlay.fadeOut();
    // } else {
    //   shirtOverlay.css("display", "none");
    //   // 设置覆盖层图案
    //   shirtOverlayPattren.css("background-image", "url(" + pattern + ")");
    //   // 覆盖层渐显
    //   shirtOverlay.fadeIn();
    // }
  }
  options.forEach(element => {
    // console.log(element);
    // element.removeClass('active');
    element.addEventListener('click', click());
    // element.onclick = click()

  });
  // for (const option of options) {
  //   // item.addEventListener('click', click(event));
  //   console.log(option);
  //   option.onclick = click()
  // }

</script>

</html>